<template>
    <div class="view">
        <android-nav-bar title="我的银行卡" v-on:back="back"></android-nav-bar>
        <div class="box">
            <cube-scroll class="scroll card-box" ref="scroll" :scroll-events="['scroll']"
                         :data="bankCard">
                <div v-if="!bankCard.length" class="none-card">
                    暂无银行卡，快去添加吧!
                </div>
                <div v-if="bankCard.length" class="cards">
                    <div class="card" v-for="(item,index) in bankCard" @click="cardSel(item.id)">
                        <div class="card-info flex">
                            <div class="card-logo">
                                <svg class="svg-icon" aria-hidden="true">
                                    <use :xlink:href="item.bank.indexOf('工商')!==-1?'#icon-gongshangyinhang':
                                    item.bank.indexOf('建设')>0?'#icon-jiansheyinhang':
                                    item.bank=='中国银行'?'#icon-zhongguoyinhang':
                                    item.bank.indexOf('交通')!==-1?'#icon-jiaotongyinhang':
                                    item.bank.indexOf('农业')!==-1?'#icon-nongyeyinhang':
                                    item.bank.indexOf('招商')!==-1?'#icon-zhaoshangyinhang':
                                    item.bank.indexOf('光大')!==-1?'#icon-zhongguoguangdayinhangx':
                                    item.bank.indexOf('民生')!==-1?'#icon-zhongguominshengyinhang':
                                    item.bank.indexOf('平安')!==-1?'#icon-pinganyinhang':
                                    item.bank.indexOf('兴业')!==-1?'#icon-xingyeyinhang':'#icon-xinyongqiahuankuan'"></use>
                                </svg>
                            </div>
                            <div class="card-name">{{item.bank}}</div>
                            <div class="card-delete" @click.stop="deleteCard(item.id)"><span class="iconfont icon-close"></span></div>
                        </div>
                        <div class="card-number">**** **** **** {{item.card.substr(-5,4)}}</div>
                    </div>
                </div>
            </cube-scroll>
            <div class="add-card" @click="toPage('mineBankCardAdd')">
                +添加银行卡
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";
    import {Route} from "vue-router";

    Component.registerHooks([
        "beforeRouteEnter",
        "beforeRouteLeave",
        "beforeRouteUpdate",
    ]);

    @Component({
        components: {
            AndroidNavBar
        }
    })
    export default class MineBankCard extends Scene {
        private publicPath: string = process.env.BASE_URL;
        @State("UserStore")
        public user!: InterfaceUser;
        private bankCard: [] = [];
        private cardId: string | number = "";
        private amount: number | string = "";
        private remark: string = "";

        private back(): void {
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private getBankCards(): void {
            let loadToast = (<any> this).$createToast({
                time: 0,
                txt: "加载数据中...",
                mask: true
            }).show();
            Http.get(this.api.getUserCardList, {}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    console.log(res);
                    loadToast.hide();
                    this.bankCard = res.data;
                } else {
                    loadToast.hide();
                    this.globalSingleResultToast(res);
                }
            }).catch((res) => {
                loadToast.hide();
                console.log(res);
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            });
        }

        private cardSel(id: number): void {
            this.cardId = id;
            this.navigateBack();
        }

        private deleteCard(id: number): void {
            (this as any).$createDialog({
                type: "confirm",
                icon: "cubeic-alert",
                title: "确认删除该银行卡",
                content: "",
                confirmBtn: {
                    text: "确定按钮",
                    active: true,
                    disabled: false,
                    href: "javascript:;"
                },
                cancelBtn: {
                    text: "取消按钮",
                    active: false,
                    disabled: false,
                    href: "javascript:;"
                },
                onConfirm: () => {
                    let toast = (<any> this).$createToast({
                        time: 0,
                        txt: "删除中...",
                        mask: true
                    }).show();
                    try {
                        Http.post(this.api.delCard, {id: id}, {token: this.user.token}).then((res) => {
                            if (res.code == 1) {
                                toast = (<any> this).$createToast({
                                    time: 1000,
                                    txt: "删除成功",
                                    mask: true
                                }).show();
                                const index=this.bankCard.findIndex((value:any, index:number, arr:any)=> value.id==id);
                                this.bankCard.splice(index,1);
                            }else{
                                toast.hide();
                                this.globalSingleResultToast(res);
                            }
                        });
                    } catch (e) {
                        toast.hide();
                        console.log(e);
                    }
                },
                onCancel: () => {

                }
            }).show();
        }

        private beforeRouteLeave(to: Route, from: Route, next: () => void): void {
            if (to.name == "mineMoneyWithdrawal") {
                to.query.temp = String(this.cardId);
                to.query.amount = String(this.amount);
                to.query.remark = String(this.remark);
            }
            next();
        }

        private mounted(): void {
            this.cardId = String(this.$route.query.temp);
            this.amount = String(this.$route.query.amount);
            this.remark = String(this.$route.query.remark);
            this.getBankCards();
        }

    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;
        overflow: hidden;

        .box
            margin-top calc(var(--safe-area-inset-top) + 47px);
            height calc(100vh - var(--safe-area-inset-top) - 47px);
            background-color #303030;
            color #fff;

            &::before
                display table;
                content '';

            .scroll.card-box
                height calc(100vh - var(--safe-area-inset-top) - 47px - 50px - var(--safe-area-inset-bottom));

                .none-card
                    margin-top 100px;
                    text-align center;

                .cards
                    margin 15px;

                    .card
                        height 110px;
                        width calc(100vw - 30px);
                        background-color $theme-common-color;
                        border-radius 8px;
                        margin-bottom 15px;

                        .card-info
                            height 60px;
                            align-items center;
                            padding 0 10px;

                            .card-logo
                                width 35px;
                                height 35px;
                                line-height 35px;
                                text-align center;
                                font-size 26px;
                                border-radius 50%;
                                background-color #fff;

                            .card-name
                                width calc(100vw - 50px - 40px - 30px);
                                padding-left 10px;
                                font-size 18px;

                            .card-delete
                                width 30px;
                                text-align right;
                                color #303030;

                                .iconfont
                                    font-size 20px;

                        .card-number
                            text-align center;
                            height 50px;
                            line-height 50px;
                            font-size 22px;


            .add-card
                position fixed;
                bottom 0;
                left 0;
                width 100vw;
                height calc(50px + var(--safe-area-inset-bottom));
                line-height: 20px;
                text-align center;
                border-top 1px solid #fff;
                padding 15px 0 calc(15px + var(--safe-area-inset-bottom)) 0;
                background-color #303030;


</style>
